<template>
  <div class="app">
    <!-- 使用vue脚手架初始化项目  -->
    <!-- 高度还原页面 -->
    <div class="main">
      <router-view></router-view>
    </div>
    <div class="footer">
      <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/home">标签</van-tabbar-item>
        <van-tabbar-item icon="search" to="/list">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/user">标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>
<style lang="scss">
.app{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main{
  flex: 1;
}
.footer{
  width: 100%;
  height: 60px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  line-height: 60px;
}
</style>
